<template>
  <div>

    <el-button type="primary" @click="addRoleFlag=true">添加角色</el-button>

    <el-table
      :data="roleData"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="角色名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="code"
        label="角色编码"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="describe"
        label="功能描述"
      >
      </el-table-column>


      <el-table-column
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.status==true">启用</p>
          <p v-if="scope.row.status==false">禁用</p>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
      >
      </el-table-column>


      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openRoleBindingMenu(scope.row)">分配菜单</el-button>
          <el-button type="primary" size="mini" @click="openRoleBindingStation(scope.row)">分配岗位</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--    角色添加-->
    <a-modal
      title="角色添加"
      :visible="addRoleFlag"
      :confirm-loading="confirmLoading"
      @ok="addRoleOk"
      okText="添加"
      @cancel="addRoleCancel"
      cancelText="取消"
    >


      <el-form ref="form" :model="roleForm" label-width="120px">
        <el-form-item label="角色名称:">
          <el-input placeholder="请输入角色名称" v-model="roleForm.name"/>
        </el-form-item>

        <el-form-item label="角色编码:">
          <el-input placeholder="请输入角色编码" v-model="roleForm.code"/>
        </el-form-item>

        <el-form-item label="功能描述:">
          <el-input placeholder="请输入角色功能描述" v-model="roleForm.describe"/>

        </el-form-item>

        <el-form-item label="状态:">
          <el-radio :label="true" v-model="roleForm.status">启用</el-radio>
          <el-radio :label="false" v-model="roleForm.status">禁用</el-radio>
        </el-form-item>
      </el-form>

    </a-modal>

    <!--    角色分配菜单-->

    <a-modal
      title="角色分配菜单"
      :visible="roleBindingMenuFlag"
      :confirm-loading="confirmLoading"

      @ok="addRoleBindingMenu"
      okText="添加"
      @cancel="cancelRoleBindingMenu"
      cancelText="取消"
    >

      <el-tree
        ref="tree"
        :data="menuData"
        show-checkbox
        @node-click="clickTree"
        node-key="id"
        :default-checked-keys="roleBindingMenuData"
        :default-expanded-keys="roleBindingMenuData"
        :props="defaultProps"
      >
      </el-tree>

    </a-modal>

    <!--    岗位分配-->
    <a-modal
      title="岗位分配"
      :visible="stationFlag"
      :confirm-loading="confirmLoading"
      @ok="addRoleBindingStation"
      okText="添加"

      @cancel="cancelRoleBindingStation"
      cancelText="取消"
    >
      <el-select v-model="stationValue" multiple placeholder="请选择分配的岗位">
        <el-option
          v-for="item in stationData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </a-modal>
  </div>
</template>

<script>
import role from '@/api/auth/role/index'
import menu from '@/api/auth/menu/index'
import user from '@/api/auth/user'

export default {
  name: 'index',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      addStationData: [],
      stationFlag: false,
      addRoleFlag: false,
      roleBindingMenuFlag: false,
      confirmLoading: false,
      roleData: [],
      roleForm: {
        name: '',
        code: '',
        describe: '',
        status: true
      },
      roleBindingMenuData: [],
      menuData: [],
      roleBindingMenuFrom: [],
      roleId: '',
      stationData: [],//岗位资源
      stationValue: [],
      stationFrom: []
    }
  },
  mounted() {
    this.queryAllROle()
  },
  methods: {
    clickTree(v, e) {
      console.log(v.id);
      console.log(e.parent.data.id);
    },
    openRoleBindingStation(row) {
      user.queryAllCoreStation().then(data => {
        this.stationData = data.data;
        role.getStationBasedOnRoleId(row.id).then(data =>{
          if (data.data!=null){
            this.stationValue=data.data;
          }
        });
        this.roleId = row.id
        this.stationFlag = true
      })
    },
    addRoleBindingStation() {

      let stationValue = this.stationValue
      if (stationValue != null && stationValue.length > 0) {
        stationValue.forEach(e => {
          let stationFrom = {
            roleId: this.roleId,
            userId: ''
          }
          stationFrom.userId = e
          this.stationFrom.push(stationFrom)
        })
      } else {
        let stationFrom = {
          roleId: this.roleId
        }
        this.stationFrom.push(stationFrom)
      }

      role.stationBindingRole(this.stationFrom).then(data => {
        this.$message({
          showClose: true,
          type: 'success',
          message: data.message
        })
        this.stationData = [];
        this.stationFrom=[];
        this.stationFlag = false
        this.rowId='';
      })
    },
    cancelRoleBindingStation() {
      this.stationData = [];
      this.stationFrom=[];
      this.stationFlag = false
      this.rowId='';
    },
    findAllAuthMenu() {
      menu.findAllAuthMenu().then(data => {
        this.menuData = data.data
      })
    },
    openRoleBindingMenu(row) {
      role.queryMenuBaseOnRoleId(row.id).then(data => {
        this.roleBindingMenuData = data.data
        this.roleId = row.id
        this.roleBindingMenuFlag = true
        this.findAllAuthMenu()
      })
    },
    addRoleBindingMenu() {
      console.log("",this.$refs.tree)
      let keys = this.$refs.tree.getCheckedKeys();
      var parentIds = this.$refs.tree.getHalfCheckedKeys()
      console.log("parentIds:",parentIds)
      if (keys != null && keys.length > 0) {
        keys.forEach(e => {
          let dataFrom = {
            roleId: this.roleId,
            authorityId: '',
            authorityType: 'MENU'
          }
          dataFrom.authorityId = e
          this.roleBindingMenuFrom.push(dataFrom)
        });
        parentIds.forEach(e =>{
          let dataFrom = {
            roleId: this.roleId,
            authorityId: e,
            authorityType: 'MENU'
          }
          this.roleBindingMenuFrom.push(dataFrom)
        })


      } else {
        let dataFrom = {
          roleId: this.roleId,
          authorityId: '',
          authorityType: 'MENU'
        }

        this.roleBindingMenuFrom.push(dataFrom)
      }
      role.roleBindingMenu(this.roleBindingMenuFrom).then(data => {
        this.$message({
          showClose: true,
          type: 'success',
          message: data.message
        })
        this.roleBindingMenuFlag = false
        this.roleBindingMenuFlag = null
        this.roleId = ''
        this.menuData = null
        this.roleBindingMenuFrom = []
      })

    },
    cancelRoleBindingMenu() {
      this.roleBindingMenuFlag = false
      this.roleBindingMenuFlag = null
      this.roleId = ''
      this.menuData = null
    },
    addRoleOk() {
      role.addRole(this.roleForm).then(data => {
        this.$message({
          showClose: true,
          type: 'success',
          message: data.message
        })
        this.roleForm = {}
        this.roleForm.status = true
        this.addRoleFlag = false
        this.queryAllROle()
      })

    },
    addRoleCancel() {
      this.roleForm = {}
      this.roleForm.status = true
      this.addRoleFlag = false
    },
    queryAllROle() {
      role.queryAllROle().then(data => {
        this.roleData = data.data
      })
    }
  }
}
</script>

<style scoped>

</style>
